<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!doctype html>
<html>
<head>
    <title>图表</title>
    <base href="<%=basePath%>" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="layui/css/layui.css" media="all"> <!-- 适应所有设备 -->
    <style type="text/css">
    </style>
</head>
<% String nowDay = new SimpleDateFormat("yyyy-MM-dd").format(new Date()); %>
<body>

<br />
    <form class="layui-form" onsubmit='return false'>
        <!-- 返回日志信息 -->
        <div class="layui-form-item" style="margin: auto; width: 1000px">
            <div class="layui-input-inline">
                <input type="text" name="roomId" id="roomId" placeholder="房间" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="StartTime"
                           placeholder="开始时间" lay-filter="startTime" name="startTime" autocomplete="off">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="EndTime"
                           placeholder="结束时间" lay-filter="endTime" name="endTime" autocomplete="off">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button class="layui-btn layui-btn-normal" data-type="reload" lay-filter="SelectOrder"
                            id="SelectOrder" onsubmit='return false'>搜索</button>
                </div>
            </div>
        </div>
    </form>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 100%;height:400px;"></div>
    <table class="layui-table" lay-skin="nob" id="poolRecord" lay-filter="poolRecord"></table>

    <script src="js/jquery.min.js"></script>
    <script src="layui/echarts.min.js"></script>
    <script src="layui/layui.js" charset="utf-8"></script>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    layui.use(['form', 'layer', 'table','laydate'], function() {
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        var table = layui.table;


        laydate.render({
            elem: '#StartTime'
            ,type: 'datetime'
        });

        laydate.render({
            elem: '#EndTime'
            ,type: 'datetime'
        });

        table.render({
            elem: '#poolRecord',
            url: 'room/selectPool',
            method: 'post',
            title: '房间',
            totalRow: true,
            autoSort: false,
            cellMinWidth: 50, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            id: 'AllTable',
            request: {
                pageName: 'pageIndex',
                limitName: 'pageCount'
            },
            cols: [[
                {field: 'roomId',title: '房间号'},
                {field: 'configId',title: '场次'},
                {field: 'timeFormat',title: '时间'},
                {field: 'hp',title: '血池平衡值'},
                {field: 'inventoryvalue',title: '剩余血池'},
                {field:'currentwinlose',title:'当前输赢'},
                {field: 'winlose',title: '总输赢',sort: true},
                {field: 'CurrentWinLose',title: '当日输赢'},
                {field: 'GoldScore',title: '奖金彩池',sort: true},
                {title: '操作',fixed: 'right',width: 200,toolbar: '#playertable'}
            ]],
            page:{
                limit: 50,
                limits: [30, 50, 70, 100,150,200],
            }, //分页
            response: {
                statusCode: 200
                //重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData: function(res) { //将原始数据解析成 table 组件所规定的数据
                var xAxis = new Array();
                var hp = new Array();
                var inventoryvalue = new Array();
                console.log(res);
                for (let i = 0; i < res.data.length; i++) {
                    var str = res.data[i].timeFormat;
                    str = str.substring(str.indexOf(" ")+1,str.length);
                    xAxis.push(str);
                    hp.push(res.data[i].hp);
                    inventoryvalue.push(res.data[i].inventoryvalue);
                }
                //折线图
                var option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['血池平衡值', '剩余血池']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxis
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '血池平衡值',
                            type: 'line',
                            stack: '总量',
                            data: hp
                        },
                        {
                            name: '剩余血池',
                            type: 'line',
                            stack: '总量',
                            data: inventoryvalue
                        },
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                return {
                    "code": res.status, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                    //解析数据列表
                };
            }
        });



        $('#SelectOrder').on('click', function(){
            table.reload('AllTable',{
                page:{
                    cuur:1
                },
                where:{
                    roomId : $('#roomId').val(),
                    startTime : $('#StartTime').val(),
                    endTime : $('#EndTime').val()
                }
            })
        });

        // setInterval(function(){
        //     table.reload('AllTable', {});
        // },60000);


    });
</script>
</body>
</html>
